<div class="yl10-content">
  <div class="primeng-datatable-container" [busyIf]="primengTableHelper.isLoading">
    <div class="mb-4">
      <h5 class="mb-4">
        <i class="fa fa-list"></i> 出库信息</h5>
      <p-table #dataTable [value]="outs" rows="10" [paginator]="false" [scrollable]="true" ScrollWidth="100%" dataKey="id"
        [responsive]="primengTableHelper.isResponsive" [expandedRowKeys]="expandedRowKeys" [resizableColumns]="primengTableHelper.resizableColumns">
        <ng-template pTemplate="caption">
          <div class="row align-items-center m--margin-bottom-10">
            <div class="col-xl-4" style="text-align:left">
              <p-multiSelect [options]="cols" [(ngModel)]="selectedColumns" optionLabel="header" selectedItemsLabel="已选择 {0} 列"
                [style]="{padding: 0}" defaultLabel="Choose Columns"></p-multiSelect>
            </div>
          </div>
        </ng-template>
        <ng-template pTemplate="header">
          <tr>
            <!-- <th style="width: 25px"></th> -->
            <th width="60px">
              操作
            </th>
            <th width="80px">
              出库数量
            </th>
            <th *ngFor="let col of selectedColumns" width="{{col.width}}">
              {{col.header}}
            </th>
          </tr>
        </ng-template>
        <ng-template pTemplate="body" let-record let-expanded="expanded">
          <tr>
            <!-- <td style="width: 25px">
              <a href="javascript:;" [pRowToggler]="record">
                <i [ngClass]="expanded ? 'pi pi-chevron-down' : 'pi pi-chevron-right'"></i>
              </a>
            </td> -->
            <th width="60px">
              <button type="button" class="btn btn-success btn-sm" (click)="yl10ChildModal.show(pipe.id, record.id)">退库</button>
            </th>
            <th width="80px">
              {{record.itemAmount}}
            </th>
            <td *ngFor="let col of selectedColumns" width="{{col.width}}">
              {{record[col.field]}}
            </td>
          </tr>
        </ng-template>
        <!-- <ng-template pTemplate="rowexpansion" let-record>
          <tr>
            <td [attr.colspan]="selectedColumns.length + 5">

      </td>
      </tr>
      </ng-template> -->
      </p-table>
      <h5 class="mb-4" style="margin-top: 20px;">
        <i class="fa fa-list"></i> 退库信息</h5>
      <p-table [value]="returns" [scrollable]="true" ScrollWidth="100%">
        <ng-template pTemplate="header">
          <tr>
            <th width="80px">退库数量</th>
            <th width="200px">退库位置</th>
            <th *ngFor="let col of selectedColumns" width="{{col.width}}">
              {{col.header}}
            </th>
          </tr>
        </ng-template>
        <ng-template pTemplate="body" let-rowData>
          <tr *ngFor="let item of rowData.returnMaterialForProduct">
            <td width="80px">{{item.materialForProduct.itemAmount}}</td>
            <td width="200px">{{item.locationOfMaterial.displayName}}</td>
            <td *ngFor="let col of selectedColumns" width="{{col.width}}">
              {{item.materialForProduct[col.field]}}
            </td>
          </tr>
        </ng-template>
      </p-table>
    </div>
  </div>
  <yl10ChildModal #yl10ChildModal (modalSave)="reloadPage()"></yl10ChildModal>
</div>
